<template>
  <div id="teamDetailPage">
    <van-image
        width="100%"
        height="200"
        :src="team?.coverImage ||　defaultImg"
    />

    <van-cell-group inset>
      <van-cell v-if="currentUser?.role==1 || currentUser?.id==team?.userId" title="更换封面" icon="photo-o">
        <template #value>
          <van-uploader :max-count="1" :after-read="upload" v-model="fileList" :preview-image="false">
            <van-button v-if="uploading===false" icon="add-o" color="linear-gradient(to right, #548be3, #0059ff)"
                        type="primary" round size="small">上传封面
            </van-button>
          </van-uploader>
          <van-button v-if="uploading===true" icon="plus" type="primary" round size="small" uploading
                      uploading-text="上传中...">
            上传图片
          </van-button>
        </template>
      </van-cell>

      <van-cell title="队伍名称:" icon="flag-o" :value="team.name"/>
      <van-cell title="队伍描述:" icon="label-o" :value="team.description"/>
      <van-cell title="队长名字：" icon="manager-o" :value="team.leaderName"/>
      <van-cell title="队伍状态：" icon="shield-o" :value="teamStatusEnum[team.status]"/>
      <van-cell title="队伍人数：" icon="friends-o" :value="`${team.hasJoinNum}/${team.maxNum}`"/>
      <van-cell title="过期时间：" icon="clock-o" :value="team.expireTime || '永不过期'"/>
      <van-cell title="队伍聊天室：" icon="chat-o" is-link @click="toChat" v-if="team.hasJoin"/>
    </van-cell-group>

    <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    > 队伍成员
    </van-divider>

    <team-member-card-list :login-user="currentUser" :user-list="teamMemberList" :team="team" @refresh="onRefresh"/>

    <van-empty
        v-if="(!teamMemberList || teamMemberList.length===0) && loading===false"
        image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80"
        description="暂时还没有队员"
    />
  </div>
</template>

<script setup lang="ts">
import defaultImg from "../assets/111.png"
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import {teamStatusEnum} from "../constants/team";
import {getCurrentUser} from "../services/user";
import TeamMemberCardList from "../components/TeamMemberCardList.vue";

const loading = ref(true)
const fileList = ref([])
const teamMemberList = ref()
const uploading = ref(false)
let route = useRoute();
const team = ref({})
const currentUser = ref()
onMounted(async () => {
  currentUser.value = await getCurrentUser();
  let res = await myAxios.get("/team/" + route.query.id);
  if (res?.code === 0) {
    team.value = res.data
    let res_ = await myAxios.get("/team/member/" + route.query.id);
    if (res_.code === 0) {
      res_.data.forEach((user: any) => {
        if (user.tags) {
          user.tags = JSON.parse(user.tags)
        }
      })
      teamMemberList.value = res_.data
    } else {
      Toast.fail("获取队伍成员失败")
    }
  } else {
    Toast.fail("队伍查询失败")
  }
  loading.value = false
})
let router = useRouter();
const toChat = () => {
  router.push({
    path: "/chat",
    query: {
      teamId: team.value.id,
      teamName: team.value.teamName,
      teamType: 2
    }
  })
}
const upload = async (file: any) => {
  uploading.value = true
  let formData = new FormData();
  formData.append("file", file.file)
  formData.append("id", team.value.id)
  await myAxios.put("/team/cover", formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  uploading.value = false
  location.reload()
}
const onRefresh = () => {
  location.reload()
}
</script>

<style scoped>
#teamDetailPage{
  margin-top: -15px;
}

</style>
